* {
    cursor: none !important;
  }

html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Nunito', sans-serif;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    /* Nền: Thay đổi sang gradient màu xanh-tím đậm và xanh nước biển */
    /* Màu nền được lấy cảm hứng từ không gian thư viện tối và phát sáng */
    background: linear-gradient(135deg, #2a2c41 0%, #2b1b46 50%, #580729 100%); 
    background-attachment: fixed; /* Giữ nền cố định khi cuộn */
    background-image: url('/static/magic-bg.png'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay; /* Hòa trộn gradient với hình ảnh, tạo hiệu ứng ảo diệu hơn */
    color: #CFD8DC; /* Màu chữ sáng */
    
}

a {
    text-decoration: none; 
    color: #9da5f3; /* Màu xanh nhạt cho liên kết */
}

a:hover {
    text-decoration: none; 
    color: #495788; /* Màu xanh sáng hơn khi di chuột */
}

a .tooltip-highlight {
  text-decoration: none;
}

.tooltip-highlight {
    font-style: italic; 
    font-weight: bold;
    text-decoration: none;
    cursor: help;
    transition: text-shadow 0.2s ease;
}

.tooltip-highlight:hover {
  text-shadow: 0 0 6px rgba(200, 220, 255, 0.6);
}


h2 {
    /* Màu tiêu đề: Xanh Cyan phát sáng */
    color: #4fb5f0; 
    font-family: 'Patrick Hand', cursive;
    font-size: xx-large;
    /* Thêm hiệu ứng phát sáng mờ (Tùy chọn) */
    text-shadow: 0 0 5px rgba(128, 222, 234, 0.5); 
}

h3 {
    /* Màu tiêu đề: Tím nhạt phát sáng */
    color: #a17ee2; 
    font-family: 'Patrick Hand', cursive;
    font-size: xx-large;
    /* Thêm hiệu ứng phát sáng mờ (Tùy chọn) */
    text-shadow: 0 0 5px rgba(179, 157, 219, 0.5); 
}
 
.divider {
    /* Đường chia màu xanh/trắng nhạt */
    border-top: 1px solid rgba(176, 224, 230, 0.3);
    margin: 20px 0;
}


.p-divider {
    border-top: 1px solid #ccc;
    margin: 20px 0;
    padding-top: 20px; /* Tăng khoảng cách giữa dòng kẻ và các đoạn văn */
}

p {
    line-height: 1.6;
    text-align: justify;
}

.magic-cursor {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    /* Đặt điểm gốc cho hiệu ứng và vị trí */
    transform-origin: center;
    /* Đặt vị trí của con trỏ từ tâm của vòng tròn */
    transform: translate(-50%, -50%);
    z-index: 10000;
    border-color: #1f2338;
    border-radius: 50%;
}

.magic-cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(9, 12, 65, 0.87);
}

.magic-cursor.active::before {
    border: none !important;
}


.sakura-petal {
    position: fixed;
    background-image: url('/static/sakura.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: auto;
    will-change: transform, opacity;
    width: 20px;
    height: 20px;
    z-index: 9999;
    animation: fall linear forwards;
}

@keyframes fall {
    0% {transform: translate(-50%, -50%) translateX(0) translateY(0) rotate(var(--initial-rotate, 0deg));
        opacity: 1;}
    100% {transform: translate(-50%, -50%) translateX(var(--sakura-x, 0px)) translateY(100vh) rotate(var(--sakura-rotate, 360deg));
        opacity: 0;}
}